<extend file='../master'/>
<link rel="stylesheet" href="{{__TEMPLATE__}}/css/5.css">
<block name="content">
<div class="panel panel-default">
	<div class="panel-body">
		<form action="" method="post" id="wf" ng-cloak="" class="ng-cloak form-horizontal" ng-controller="ctrl">
			<div class="container col-sm-12">
				<div class="row">
					<div class="col-sm-4 app">
						<div class="menu">
							<ul>
								<li ng-repeat="v in menus.button">
									@{{v.name}}
									<div class="cover" ng-if="v.sub_button.length">
										<div class="child-menu">
											<a href="" ng-repeat="m in v.sub_button" ng-bind="m.name"></a>
										</div>
									</div>
								</li>
							</ul>
						</div>
					</div>
					<div class="col-sm-8">
						<h3>编辑菜单</h3>
						<div class="form-group">
		                    <label for="" class="col-sm-2 control-label">名称</label>
		                    <div class="col-sm-10">
		                        <input type="text" class="form-control" name="name" value="{{$field['name']}}">
		                        <input type="hidden" class="form-control" name="id" value="{{$field['id']}}">
		                    </div>
		                </div>

						<div class="edit panel panel-default" ng-repeat="(k,v) in menus.button">
							<div class="panel-body">
							<i class="fa fa-close delIcon" ng-click="delTopMenu(k)"></i>
								<div class="panel panel-default">
									<div class="panel-body">
										 <div class="form-group">
		                                    <label class="col-sm-2 control-label">标题</label>
		                                    <div class="col-sm-10">
		                                        <input type="text" class="form-control" ng-model="v.name">
		                                    </div>
		                                </div>
		                                <div ng-if="!v.sub_button.length">
			                                <div class="form-group">
	                                            <label class="col-sm-2 control-label">类型</label>
	                                            <div class="col-sm-10">
	                                                <label class="radio-inline">
	                                                    <input type="radio" ng-model="v.type" value="view" > 链接
	                                                </label>
	                                                <label class="radio-inline">
	                                                    <input type="radio" ng-model="v.type" value="click" > 关键词
	                                                </label>
	                                            </div>
	                                        </div>
			                                <div class="form-group" ng-if="v.type=='view'">
			                                    <label class="col-sm-2 control-label">链接</label>
			                                    <div class="col-sm-10">
			                                        <input type="text" class="form-control" ng-model="v.url" >
			                                    </div>
			                                </div>
			                                <div class="form-group" ng-if="v.type=='click'">
			                                    <label class="col-sm-2 control-label">关键字</label>
			                                    <div class="col-sm-10">
			                                        <input type="text" class="form-control" ng-model="v.key" >
			                                    </div>
			                                </div>
		                                </div>
		                                <div class="panel panel-default" ng-if="v.sub_button.length">
		                                	<div class="panel-heading">子菜单</div>
		                                	<div class="edit panel-body" ng-repeat="m in v.sub_button">
		                                		<i class="fa fa-close delIcon" ng-click="delChildMenu(k,m)"></i>
		                                		<div class="panel panel-default">
		                                			<div class="panel-body">
		                                				<div class="form-group">
						                                    <label class="col-sm-2 control-label">标题</label>
						                                    <div class="col-sm-10">
						                                        <input type="text" class="form-control" ng-model="m.name" required>
						                                    </div>
						                                </div>
						                                <div class="form-group">
                                                            <label class="col-sm-2 control-label">类型</label>
                                                            <div class="col-sm-10">
                                                                <label class="radio-inline">
                                                                    <input type="radio" ng-model="m.type" value="view" > 链接
                                                                </label>
                                                                <label class="radio-inline">
                                                                    <input type="radio" ng-model="m.type" value="click" > 关键词
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <div class="form-group" ng-if="m.type=='view'">
                                                            <label class="col-sm-2 control-label">链接</label>
                                                            <div class="col-sm-10">
                                                                <input type="text" class="form-control" ng-model="m.url" required>
                                                            </div>
                                                        </div>
                                                        <div class="form-group" ng-if="m.type=='click'">
                                                            <label class="col-sm-2 control-label">关键词</label>
                                                            <div class="col-sm-10">
                                                                <input type="text" class="form-control" ng-model="m.key" required>
                                                            </div>
                                                        </div>
		                                			</div>
		                                		</div>
		                                	</div>
		                                </div>
		                                <button type="button" class="btn btn-default btn-sm" ng-click="addChildMenu(k)">添加子菜单</button>
									</div>
								</div>
							</div>
						</div>
						<button type="button" class="btn btn-success" ng-click="addTopMenu()">添加一级菜单</button>
					</div>
				</div>
			</div>
			<textarea name="data" hidden="hidden"></textarea>
		    <button class="btn btn-primary">保存</button>
		</form>
	</div>
</div>
<script>
require(['angular','underscore','bootstrap'],function(angular,_,$){
	var m=angular.module('wf',[]);
	m.controller('ctrl',['$scope',function($scope){
		var action = "<?php echo isset($field)?'edit':'add';?>";
		if (action=='add') {
			$scope.menus = {
				button:[
		            {
		                name: '',
		                type:'',
		                url: '',
		                key: '',
		                sub_button: []
		            }
		        ]
	        };
        } else{
        	 $scope.menus = <?php echo $field['data']?:'[]';?>;
        }
        //添加一级菜单
        $scope.addTopMenu=function(){
        	if ($scope.menus.button.length==3) {
        		alert('菜单最多为三个');
        		return false;
        	}
        	var menu={
        		name:'',
        		type:'view',
        		url:'',
        		key:'',
        		sub_button:[]
        	}
        	$scope.menus.button.push(menu);
        };
        //添加子菜单
        $scope.addChildMenu=function(k){
        	if ($scope.menus.button[k].sub_button.length==5) {
        		alert('子菜单最多为五个');
        		return false;
        	}
        	var menu={
        		title:'',
        		url:'',
        	}
        	$scope.menus.button[k].sub_button.push(menu);
        };
        //删除一级菜单
        $scope.delTopMenu=function(k){
        	$scope.menus.button=_.without($scope.menus.button,$scope.menus.button[k]);
        };
        //删除子菜单
        $scope.delChildMenu=function(k,item){
            $scope.menus.button[k].sub_button = _.without($scope.menus.button[k].sub_button,item);
        }
        $("form").submit(function(){
        	$("[name='data']").val(angular.toJson($scope.menus));
        })

	}]);
	angular.bootstrap(angular.element("#wf"),['wf']);
})
</script>
</block>